<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            font-size: 16px;
        }
        . title. text,.lianxiren .text{
            line-height: 60px;
            font-weight: 500;
        }
        .lianxiren>a{
            background-color: #cbcbcb;
            display: block;
            color: #5f5f5f;
            text-decoration: none;
            padding: 3px 10px;
            font-size: 0.875rem;
        }
        .menu{
            position: fixed;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
        }
        .menu>a{
            display: block;
            font-size: 0.75rem;
            color: #565656;
            text-decoration: none;
        }
    </style>
    <link href="../css/base.css" rel="stylesheet"/>
</head>
<body>
<div>
    <header>
        <p class="title">通讯录</p>
        <div class="icon">
            <img width="21" height="21" src="../img/img_weixin/search.svg">
            <img width="21" height="21" style="margin-left: 10px"
                 src="../img/img_weixin/add.svg">
<!--&lt;!&ndash;            <img src="../img/img_weixin/search.svg">&ndash;&gt;-->
<!--&lt;!&ndash;            <img style="margin-left: 10px"&ndash;&gt;-->
<!--                 src="../img/img_weixin/add.svg">-->
        </div>
    </header>
        <ul class="title">
            <li>
                <img src="../img/img_tongxunlu/newfriend.svg">
                <section class="text">
                    新的朋友
                </section>
            </li>
            <li>
                <img src="../img/img_tongxunlu/liaotian.svg">
                <section class="text">
                    仅聊天的朋友
                </section>
            </li>
            <li>
                <img src="../img/img_tongxunlu/qunliao.svg">
                <section class="text">
                    群聊
                </section>
            </li>
            <li>
                <img src="../img/img_tongxunlu/biaoqian.svg">
                <section class="text">
                    标签
                </section>
            </li>
            <li>
                <img src="../img/img_tongxunlu/gongzhonghao.svg">
                <section class="text">
                    公众号
                </section>
            </li>
        </ul>
        <div class="lianxiren">
            <a name =a href="javascript:void(0)">A</a>
            <ul>
                <li>
                    <img width="48" height="48" src="../img/img_weixin/touxiang1.jpg">
                    <section class="text">A1</section>

                </li>
                <li>
                    <img width="48" height="48" src="../img/img_weixin/touxiang2.jpg">
                    <section class="text">A2</section>

                </li>
                <li>
                    <img src="../img/img_tongxunlu/newfriend.svg">
                    <section class="text">A3</section>

                </li>
            </ul>
            <a name =b href="javascript:void(0)">B</a>
            <ul>
                <li>
                    <img src="../img/img_tongxunlu/newfriend.svg">
                    <section class="text">B1</section>

                </li>
                <li>
                    <img src="../img/img_tongxunlu/newfriend.svg">
                    <section class="text">B2</section>

                </li>
            </ul>
        </div>
</div>
<div class="menu">
    <a href="#a">A</a>
    <a href="#b">B</a>
    <a href="#c">C</a>
    <a href="#d">D</a>
    <a href="#e">E</a>
    <a href="#f">F</a>
    <a href="#g">G</a>
    <a href="#h">H</a>
    <a href="#i">I</a>
    <a href="#j">J</a>
    <a href="#k">K</a>
    <a href="#l">L</a>
    <a href="#m">M</a>
    <a href="#n">N</a>
    <a href="#o">O</a>
    <a href="#p">P</a>
    <a href="#q">Q</a>
    <a href="#r">R</a>
    <a href="#s">S</a>
    <a href="#t">T</a>
    <a href="#u">U</a>
    <a href="#v">V</a>
    <a href="#w">W</a>
    <a href="#x">X</a>
    <a href="#y">Y</a>
    <a href="#z">Z</a>
</div>
</body>
</html>